<template>
   <div class="baseInfoView">

      <div v-show="isReviewAvatar && groupId === '10100'" class="userPhoto">
            <img :src="defaultAvatar">
      </div>
      <div v-show="param.isShow" class="formItem" v-for="(param,pIndex) in localParamList" :key="pIndex" :class="param.class">
            <div class="name"> <i v-show="param.type == 'file'" class="iconfont iconfujian"></i>{{param.name}}：</div>
            <div class="valueContent">
                  <!-- <div v-if="param.type == 'file'" class="value">{{param.userSelection.parameterValue.split('/')[param.userSelection.parameterValue.split('/').length-1]}}</div>
                  <div v-else-if="param.type == 'img'" class="value">{{param.userSelection.parameterValue.split('/')[param.userSelection.parameterValue.split('/').length-1]}}</div> -->

                  <div v-if="param.type == 'file'" class="value">
                     <a style="color:color: rgb(0, 89, 255);" :href="fileDownloadUrl+param.userSelection.parameterValue">
                           {{param.userSelection.parameterValue.split('/')[param.userSelection.parameterValue.split('/').length-1]}}
                     </a>
                  </div>
                  <div v-else-if="param.type == 'img'" class="value">
                     <a style="color:color: rgb(0, 89, 255);" :href="fileDownloadUrl + '/root/www'  + param.userSelection.parameterValue">
                           {{param.userSelection.parameterValue.split('/')[param.userSelection.parameterValue.split('/').length-1]}}
                     </a>
                  </div>

                  <div v-else class="value">{{param.userSelection.parameterValue}}
                     <i v-show="isShowSecondaryTable && param.isLevel === '2'" class="iconfont icontianjialiebiaoxiang" @click="$refs.baseInfoSecondary.show(param,isAllowEdit);"></i>
                  </div>
                  <el-tooltip v-show="isVerify && param.verifyInfo !== undefined" class="item" effect="dark" :content="param.verifyInfo" popper-class="popperTop" placement="top">
                     <!-- <div class="error"><i class="el-icon-circle-close"></i></div> -->
                     <div class="error">错误</div>
                  </el-tooltip>
            </div>

      </div>

      <!-- 二级数据弹框 -->
      <base-info-secondary ref="baseInfoSecondary" :userId="userId"></base-info-secondary>

   </div>
</template>

<script>


import { regularJudgmentParam } from '../service/personalInfoDataProcessing'

export default {
   props:{
      paramList:{
         type:Array,    // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
         required:true, // 此属性值为必填; 使用当前组件时，若未传入此值就会报错
      },
      groupId:{
         type:String,   // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
         required:true,
      },
      isReviewAvatar:{ // 是否显示头像
         type: Boolean,
         default: false
      },
      isAllowEdit:{ // 是否允许编辑
         type: Boolean,
         default: true
      },
      isVerify:{ // 是否验证参数的正确性
         type: Boolean,
         default: false
      },
      isShowSecondaryTable:{ // 是否显示二级表
         type: Boolean,
         default: true
      },
      userId:{ // 用户ID
         type: String,
         required:false,
         default:""
      }

   },
   data(){
        return {
            localParamList:[],   // 所有参数列表
            defaultAvatar:require("../assets/默认头像.png"),

            fileDownloadUrl:''
        }
   },
   created() {
      this.fileDownloadUrl = '/admin/qaStandardRecord/download?targetUrl=';
   },
   mounted(){
      this.localParamList = this.paramList;
    },
    methods:{
        commit(){
            this.$emit("commit");
        },
        containerClick(event){
            if(event.target.className.indexOf("preview-container") != -1){
                 this.$refs.container.style.display="none";
            }
        },
    },
    watch:{
         paramList(){
            this.localParamList = this.paramList;
         },
         localParamList(){

            let that = this;
            this.paramList.forEach(function (param) {
               if(param.id == "10100-031"){
                  if(param.userSelection.parameterValue.length <= 0){
                     that.defaultAvatar = require("../assets/默认头像.png");
                  }else{
                     that.defaultAvatar = param.userSelection.parameterValue;
                  }
               }

               param.verifyInfo = regularJudgmentParam(param);
            });
         }
    }


}
</script>

<style scoped>

.userPhoto{
    height: 300px;
    width: 33%;
    float: left;
}
.userPhoto>img{
    /*height: 100%;*/
    /*background: #f3f3f3;*/
    /*background: white;*/
    margin-left: 80px;
    object-fit: cover;
    border-radius: 8px;
    width: 197px;
    height: 300px;
}



.formItem{
    width: 33%;
    display: inline-flex;
    /* display: inline-flex !important; */
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    color:#333333;
    font-size:14px;
    margin:6px 0px;
}

.formItem>.name{
    text-align: right;
    padding-right: 4px;
    width: 36%;
}
.formItem>.name>i{
    color: rgb(18, 150, 219);
    margin-right: 4px;
}
.formItem>.valueContent{
    width: 60%;
    display:flex;
}
.formItem>.valueContent>.value{
   word-break: break-word;
}
.formItem>.valueContent>.value>i{
    font-size: 18px;
    cursor: pointer;
    color: #6f8bef;
    margin-left: 6px;
}

/* 50%宽度 */
.formItem_0_5{
    width:50%;
}
.formItem_0_5>.name{
    width:60%;
}
.formItem_0_5>.valueContent{
    width:30%;
}


.dialogVisible_1{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background:rgba(0, 0, 0, 0.12156862745098039);
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    font-size: 14px;
    overflow: auto;
    padding: 40px 0px;
    box-sizing: border-box;
}
.dialogVisible_1>.container{
    width: 60%;
    background: white;
    border-radius: 5px;
    padding: 24px 30px 30px 30px;
    height: fit-content;
}
.dialogVisible_1 .title{
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    padding-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dialogVisible_1 .title>.close{
    cursor: pointer;
}
.dialogVisible_1 >>> td,
.dialogVisible_1 >>> .cell{
    font-size: 14px;
}


/* tip提示 */
.el-tooltip{
   padding: 0px 6px;
   color: rgb(255, 0, 0);
   /* font-size: 16px; */
}


</style>
